{strip}

{literal}
<script>
/*jQuery.validator.setDefaults({
	debug: true,
	success: "valid"
});*/

/*$(document).ready(function() { 
	$("#cart_add_form").validate({
   		
		onkeyup: false,
		
		rules: {
		    'addForm[sAddr][firstName]': {
		    	required: true
		    }
		    
		},


    	submitHandler: function(form) {
   			$(form).submit();
   		},

   		messages: {
			'addForm[sAddr][firstName]': {
		    	required: ""
		    }	
		}

	});
});*/

var totalPrice = 0;

function removeFromCart(objId,index){
                //alert("artworkId "+artworkId);
                $.ajax({
                    type: "GET",
                    url: "/cart/remove",
                    data: {
                       indexKey: index
                    },
                    success: function(data){
                    	
                     	window.location.reload();
                    	//showPopup(data, 'Remove from Basket', false);
						//favCount = favCount+1;
						//$('#favCount').html(favCount);
                    },
                    error: function(xhr, statusText, errorThrown){
                        alert("Error addToFavourites");
                    }
                });
            }

function updateQuantity(index, quantity){
	$.ajax({
	   	type: "GET",
       	url: "/cart/update-quantity",
		data: {
			indexKey: index,
			quantity: quantity
        },
        success: function(data){
          	//showPopup(data, 'Remove from Basket', false);
		},
		error: function(xhr, statusText, errorThrown){
        	alert("Error addToFavourites");
		}
	});
}

function setPrice(aPrice,pPrice,quantity, elemId, index, obj){
	if (parseFloat(quantity) == 0 || isNaN(parseFloat(quantity)) == true){
		alert('Invalid input');
		obj.value = 1;
		quantity = 1;
	}
	updateQuantity(index, quantity);
	var currentPrice;
	currentPrice = (aPrice+pPrice)*quantity;
	$('#'+elemId).html(currentPrice.toFixed(2));
	
	updateSubTotal();
}

function updateSubTotal(){
	var subTotal = 0;
	
	$.each($('.tPrice'), function(ind, val) {
		subTotal += parseFloat(val.innerHTML);
   	});
   	
   	$('#cartSubtotal_1').html('&euro; '+subTotal.toFixed(2));
   	$('#cartSubtotal_2').html('&euro; '+(subTotal+shippingPrice).toFixed(2));
	$('#cartTotal').html('&euro; '+(subTotal+shippingPrice+voucherPrice).toFixed(2));
}

</script>
{/literal}

    <!-- content -->
        <div id="content">
			<div id="basket" style="margin-left: 25px;">
			<form id="cart_add_form" action="/cart/checkout" onsubmit="" method="post">
			{if $cart}
				<div id="basket_left">
                	<h2>Your Basket</h2>
                	
                	<div class="basketList">
                		<div class="basketListArtwork left">Artwork</div>
                		<div class="basketListProduction left">Skin Production</div>
                		<div class="basketListQuantity left">Quantity</div>
                		<div class="basketListTotal right">TOTAL</div>
                	</div>
                	
                	{assign var='total' value='0'}
                	{foreach $cart as $c}
                	
                		{assign var=printingPrice value=0}
                		{foreach $c.deviceMatrices as $m}
                			{assign var=printingPrice value=$printingPrice+$m[2]}
                		{/foreach}
                				
                	{assign var='total' value=($total+($c.quantity*($printingPrice+$c.artwork->getPrice())))}
                	<div class="{cycle values='basketListBlue,basketListPink'}">
                		<div class="basketListArtwork left" style="height: 145px;">
                			<div class="left"  style="border-right: 2px solid #DDD; border-bottom: 2px solid #DDD; margin-top: 2px;margin-left: 2px;">{$c.artwork->getArtwork()->getThumb($thumbs->cart->width, $thumbs->cart->height)}</div>
                			<div class="left " style="width: 90px; border: 0px; margin: 2px; ">
                				<p class="" style="font-size: 10pt; text-align: center; padding: 5px;"><strong>&euro; {$c.artwork->getPrice()|string_format:"%.2f"}</strong></p>
                				<p class="artwork_content_header_text_rigth_lower " style="text-align: center; ">{$c.artwork->getArtwork()->getCourtesyText()}</p>
                			</div>
                			<div class="clear"> </div>
                			<div style="font-size: 8pt; border: 0px;">
                				<p><strong>SkinWorld:</strong> {$c.artwork->getSkinworldName()}</p>
                				<p><strong>Title:</strong> {$c.artwork->getName()}</p>
                				<p><strong>By:</strong> {$c.artwork->getArtwork()->getDesigner()}</p>
                			</div>
                		</div>
                		<div class="basketListProduction left" style="height: 145px;">
                			<div class="left"  style="background: #FFFFFF; border-right: 2px solid #DDD; border-bottom: 2px solid #DDD;  margin-top: 2px;margin-left: 2px; width: {$thumbs->cart->width}px; height: {$thumbs->cart->height}px">
                				{$c.device->getThumb($thumbs->cart->width, $thumbs->cart->height)}
                			</div>
                			<div class="left " style="width: 90px; border: 0px; margin: 2px; ">
                				
                				<p class="" style="font-size: 10pt; text-align: center; padding: 5px;"><strong>&euro; {$printingPrice|string_format:"%.2f"}</strong></p>
                				<p class="" style="text-align: center; font-size: 9pt;"><i>
                					{foreach $c.deviceMatrices as $m}
                						{if $m@index == 0}
                							{$m[1]}
                						{else}
                							&nbsp;& {$m[1]}
                						{/if}
                					{/foreach}</i>
                				</p>
                			</div>
                			<div class="clear"> </div>
                			<div style="font-size: 8pt; border: 0px;">
                				<p><strong>Device:</strong> {$c.device->getDeviceType()->getType()}</p>
                				<p><strong>Maker:</strong> {$c.device->getDeviceManufacturer()->getManufacturer()}</p>
                				<p><strong>Model:</strong> {$c.device->getModel()|escape}</p>
                			</div>
                			
                		</div>
                		<div class="basketListQuantity left" style="height: 145px;">
                			<p style="text-align: center; margin-top: 10px; margin-left:5px;margin-right:5px; padding-left: 5px; padding-right: 5px; padding-top: 6px; padding-bottom: 0px; background: #FFF;">
                				<input name="addForm[quantity][{$c@index}]" type="text" value="{$c.quantity}" id="quantity[{$c@index}]" style="width: 19px; background-color: #FFFFFF; border:0px; font-weight: bold;" maxlength="2" onchange="setPrice({$c.artwork->getPrice()},{$printingPrice},this.value,'tPrice_{$c@index}', {$c@index}, this);"/>
                			</p>
                		</div>
                		<div class="basketListTotal right" style="height: 145px;">
                			<strong><p style="font-size: 10pt;padding: 2px; margin-top:5px;">&euro; <font class="tPrice" id="tPrice_{$c@index}">{(($c.quantity*$printingPrice)+$c.artwork->getPrice())|string_format:"%.2f"}</font></p></strong>
                			<br /><br /><br /><br />
                			<a href="#" onclick="removeFromCart('cart_{$c@index}', {$c@index});"><i style="font-size: 9pt; color: #3FAEE3;">Remove</i></a>
                		</div>
                	</div>
                	<div class="clear"> </div>
                	
                	{/foreach}
                	<script>
                		total = {$total};
                	</script>
                    
                	<div class="right" style="margin-top: 10px; margin-right: 10px; border-top: 2px solid #EEEEEE; width: 280px; text-align: right;">
                    	<span style="margin-right: 20px; ">Subtotal</span><strong><span id="cartSubtotal_1">&euro; {$total|string_format:"%.2f"}</span></strong>
                    </div>
                    <div class="clear"> </div>
                    <br />
                    <div class="basketList">
                		<div class="left">Shipping Service</div>
                		
                		<div class="clear"> </div>
                	</div>
                	
                    <div class="basketListBlue" >
                		<div class="left" style="height: 100px; padding: 10px; border: 0px;">
                			<div class="left"  style="background: #FFFFFF; border-right: 2px solid #DDD; border-bottom: 2px solid #DDD;  margin-top: 2px;margin-left: 2px; width: {$thumbs->cart->width}px; height: {$thumbs->cart->height}px">
                				{$shippingService->getThumb($thumbs->cart->width, $thumbs->cart->height)}
                			</div>
                		</div>
                		<div class="left" style="text-align: left; height: 100px; padding: 10px; width: 325px;">
                			<p><strong>{$shippingService->getService()}</strong></p>
                			<p style="font-size: 8pt;">{$shippingService->getDescription()|nl2br}</p>
                		</div>
                		<input name="addForm[shippingServicesId]" type="hidden" value="{$shippingService->getId()}" />
                		<div class="basketListTotal right" style="height: 100px;padding-top: 5px;padding-bottom:15px;"><strong>&euro; {$shippingService->getPrice()|string_format:"%.2f"}</strong></div>
                	</div>
                    
                	<script>
                		var shippingPrice = {$shippingService->getPrice()};
                		var voucherPrice = -10.57;
                	</script>
                	
                    <div class="right" style="margin-top: 10px; margin-right: 10px; border-top: 2px solid #EEEEEE; width: 280px; text-align: right;">
                    	<span style="margin-right: 30px; ">Subtotal</span><strong><span id="cartSubtotal_2">&euro; {$shippingService->getPrice()|string_format:"%.2f"+$total}</span></strong>
                    </div>
                    <div class="clear"> </div>
                    
                    
                    {assign var=voucherValue value=-10.57}
                    <div class="basketList" style="width: 100%">
                		<div class="left" style="height: 80px; padding: 10px; border: 0px; text-align: left;">
                			
                			<p><strong>Encash Gift Voucher or Promotional Code (if available)</strong></p>
                			<p style="font-size: 7pt; color: gray"><strong>Only one Voucher per transaction.</strong></p>
                			
                			<div>
                				<div class="left">
                					<input type="text" value="Enter Code" class="sInput" style="height: 15px;font-size: 7pt; text-align: center;" onclick="this.value='';"/>
                					<button style="background-color: #11A6DD; border: 0px; height: 24px; margin-left: 3px;color: #FFF" onclick="alert('Invalid Voucher');return false;"><i>Apply</i></button>
                				</div>
                				<div class="right" style="width: 450px; text-align: right;"><strong>&euro; {$voucherValue} (example)</strong></div>
                			</div>
                			<div class="clear"> </div>
                    
                		</div>
                		
                		
                	</div>
                	
                    <div class="right" style="margin-top: 10px; margin-right: 10px; border-top: 2px solid #EEEEEE; width: 280px;font-size: 14pt; text-align: right;">
	                    	<span style="margin-right: 30px;">Total</span><strong style="font-size: 16pt;"><span id="cartTotal">&euro; {$shippingService->getPrice()|string_format:"%.2f"+$total+$voucherValue}</span></strong>
                    </div>
                    <div class="clear"> </div>
                 	
				</div>
               <!-- ******************************************************************* RIGHT ***** -->                 
                <div id="basket_right">
                   	<!--<img src="/public/styles/images/cart_elems.png" border="0" />-->
                    <h2>Billing & Shipping</h2>
                    
                    	<div style="width: 95%; margin-top: 32px; margin-left: 10px;background-color:#F0F7FA;">
                    		<h4 style="padding: 10px;">Shipping Address</h4>
                    		<p style="font-size: 8pt; color: gray; margin-left: 130px; text-align: left; margin-top: 5px;">
                    			<i>Required</i>
                    		</p>
                    		<label>First Name</label>
                    			<input value="{if $formData}{$formData.sAddr.firstName}{/if}" name="addForm[sAddr][firstName]" type="text" /><br />
                    			
                    		<label>Last Name</label>
                    			<input value="{if $formData}{$formData.sAddr.lastName}{/if}" name="addForm[sAddr][lastName]" type="text" /><br />
                    			
                    		<label>Email</label>
                    			<input value="{if $formData}{$formData.sAddr.email}{/if}" name="addForm[sAddr][email]" type="text" /><br />
                    			
                    		<label>Street and No.</label>
                    			<input value="{if $formData}{$formData.sAddr.street}{/if}" name="addForm[sAddr][street]" type="text" style="width: 113px;"/>
                    			&nbsp;<input value="{if $formData}{$formData.sAddr.buildingNo}{/if}" name="addForm[sAddr][buildingNo]" type="text"style="width: 25px;"/>
                    			/<input value="{if $formData}{$formData.sAddr.apartmentNo}{/if}" name="addForm[sAddr][apartmentNo]" type="text" style="width: 25px;"/><br />
                    			
                    		<label>Zip and City</label>
                    			<input value="{if $formData}{$formData.sAddr.postcode}{/if}" name="addForm[sAddr][postcode]" type="text" style="width: 65px;"/>
                    			&nbsp;<input value="{if $formData}{$formData.sAddr.city}{/if}" name="addForm[sAddr][city]" type="text" style="width: 118px;"/><br />
                    			
                    		<label>Country</label>
                    			<select name="addForm[sAddr][country]" style="width: 210px; height: 25px;">
									{foreach from=$countries item=c}
										<option value="{$c->getCountry()}" {if $formData}{if $formData.sAddr.country == $c->getCountry()}selected{/if}{/if}">{$c->getCountry()}</option>
									{/foreach}
								</select><br />
								
							<p style="font-size: 8pt; color: gray; margin-left: 130px; text-align: left; margin-top: 5px;">
                    			<i>Optional</i><i style="font-size: 9pt; color: #3FAEE3;"> Why?</i>
                    		</p>
                    		
                    		<label>Birthday</label>
                    			<input type="text" style="width: 55px;"/><b>/</b>
                    				<input type="text" style="width: 55px;"/><b>/</b>
                    					<input type="text" style="width: 55px;"/><br />
							<p style="font-size: 9pt; color: #3FAEE3; margin-left: 130px; text-align: left; margin-top: 5px;">
                    			<a href="#" style="font-size: 9pt; color: #3FAEE3; cursor: pointer;" onclick="$('#billingAddr').show();"><em>Differing billing address?</em></a>
                    		</p><br /><br />
                    	</div> 
                    	
                    	<div id="billingAddr" style="width: 95%; margin-top: 5px; margin-left: 10px;background-color:#FDF0E3;display: none;">
                    		<div class="left" style="width: 86%"><h4 style="margin-left: 2px;">Billing Address</h4></div>
                    		<div class="right" style="padding-top: 12px; padding-right: 4px;"><a href="#" onclick="$('#billingAddr').hide();" style="padding: 8px; background-color: #FFFFFF; font-size: 12pt"><strong>x</strong></a></div>
                    		<div class="clear"></div>	
                    		
                    		<label>Company</label>
                    			<input value="{if $formData}{$formData.bAddr.companyName}{/if}" name="addForm[bAddr][companyName]" type="text" /><br />
                    			
                    		<label>First Name</label>
                    			<input value="{if $formData}{$formData.bAddr.firstName}{/if}" name="addForm[bAddr][firstName]" type="text" /><br />
                    			
                    		<label>Last Name</label>
                    			<input value="{if $formData}{$formData.bAddr.lastName}{/if}" name="addForm[bAddr][lastName]" type="text" /><br />
                    			
                    		<label>Email</label>
                    			<input value="{if $formData}{$formData.bAddr.email}{/if}" name="addForm[bAddr][email]" type="text" /><br />
                    			
                    		<label>Street and No.</label>
                    			<input value="{if $formData}{$formData.bAddr.street}{/if}" name="addForm[bAddr][street]" type="text" style="width: 113px;"/>
                    			&nbsp;<input value="{if $formData}{$formData.bAddr.buildingNo}{/if}" name="addForm[bAddr][buildingNo]" type="text" style="width: 25px;"/>
                    			/<input value="{if $formData}{$formData.bAddr.apartmentNo}{/if}" name="addForm[bAddr][apartmentNo]" type="text" style="width: 25px;"/><br />
                    			
                    		<label>Zip and City</label>
                    			<input value="{if $formData}{$formData.bAddr.postcode}{/if}" name="addForm[bAddr][postcode]" type="text" style="width: 65px;"/>
                    			&nbsp;<input value="{if $formData}{$formData.bAddr.city}{/if}" name="addForm[bAddr][city]" type="text" style="width: 118px;"/><br />
                    			
                    		<label>Country</label>
                    			<select name="addForm[bAddr][country]" style="width: 210px; height: 25px; text-align: left;">
									{foreach from=$countries item=c}
										<option value="{$c->getCountry()}" {if $formData}{if $formData.bAddr.country == $c->getCountry()}selected{/if}{/if}>{$c->getCountry()}</option>
									{/foreach}
								</select><br /><br />
								
							<input style="width: 10px; height: 10px;" type="checkbox" name="addForm[useDifferentBAddr]" value="1" {if $formData}{if $formData.useDifferentBAddr == 1}checked{/if}{/if} >&nbsp;&nbsp;<font style="font-size: 9pt; color: gray">Use differing Billing Address</font>
							<br /><br />
                    	</div>
                    	<div style="width: 95%; margin-left: 10px;">
                    		<p style="font-size: 8pt; color: gray;">
                    			If you intend to checkout with PayPal Express, you do not need to enter your address
                    			
                    		</p>
                    		<div class="right"><img src="https://www.paypal-marketing.pl/logo/horizontal_solution85x49.gif" align="left" style="margin-right:7px;"></div>
                    		<div class="clear"></div>
                    	</div>
                    	<div class="paymentMethodBox">
                    		<h4>Payment Mode</h4>
                    		<div class="left">
                    			<img src="/public/styles/images/p1.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="1" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 1}checked{/if}{/if}/>
                    		</div>
                    		<div class="left">
                    			<img src="/public/styles/images/p2.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="2" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 2}checked{/if}{/if}/>
                    		</div>
                    		<div class="left">
                    			<img src="/public/styles/images/p3.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="3" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 3}checked{/if}{/if}/>
                    		</div>
                    		<div class="left">
                    			<img src="/public/styles/images/p4.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="4" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 4}checked{/if}{/if}/>
                    		</div>
                    		<div class="left">
                    			<img src="/public/styles/images/p1.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="5" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 5}checked{/if}{/if}/>
                    		</div>
                    		<div class="left">
                    			<img src="/public/styles/images/p2.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="6" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 6}checked{/if}{/if}/>
                    		</div>
                    		<div class="left">
                    			<img src="/public/styles/images/p3.png" /><br />
                    			<input name="addForm[paymentMethodId]" value="7" type="radio" class="pointer" {if $formData}{if $formData.paymentMethodId == 7}checked{/if}{/if}/>
                    		</div>
                    		<div class="clear"></div><br />
                        </div>
                        <div style="width: 95%; margin-top: 10px; margin-left: 10px;background-color:#FFF;">
                    		<div class="right" style="text-align: left;">
                    			<input type="radio" checked style="width: 10px; height: 10px;"/>&nbsp;<font style="font-size: 10pt; color: #000;">Join the SkinStar Newsletter</font><br />
                    			<input type="radio" style="width: 10px; height: 10px;"/>&nbsp;<font style="font-size: 10pt; color: #3FAEE3;">I have read the Terms and Conditions</font><br />
                    			<p>
                    				<button style="background-color: #11A6DD; border: 0px; height: 60px; width: 250px;margin-left: 3px;color: #FFF; cursor: pointer;" onclick="$('cart_add_form').submit();">
                    					<i style="font-size: 9pt;color: #FFF">Proceed with secure</i><br />
                    					<i style="font-size: 15pt;color: #FFF">Checkout</i>
                    				</button>
                    			</p>
                    			
                    		</div>
                    		<div class="clear"> </div>
                    		<div style="text-align: right; margin-top: 10px;">
                    			<a href="{$referer}" style="font-size: 12pt; color: #3FAEE3; margin-bottom: 5px; border-bottom: 2px solid #EEEEEE;"><i>Continue browsing SkinWorlds</i></a>
                    		</div>
                    	
                        </div>
                        <div style="width: 95%; margin-top: 10px; margin-left: 10px;background-color:#FFF;">
                    		<img src="/public/styles/images/certificates.png" border="0" width="90%"/>
                        </div>
                         
                       </div>
					
                </div>
                {else}
                <div>
					<h2>YOUR BASKET IS EMPTY</h2>
                </div>
                {/if}
           </form>
        </div>
        </div>
        
    <!-- end content  -->
{/strip}